<template>
  <div class="page">
    <div class="head-box">
      <div class="user-info">
        <img src="http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg" />
        <div class="user-box">
          <!--<div>{{ userInfo.number }}（{{ userInfo.level }}）</div>-->
          <div>标识ID:{{getUserId()}}</div>
          <!--<div>{{ userInfo.phone }}{{ userInfo.jobNum }}</div>-->
        </div>
      </div>
    </div>
    <div class="moneyItem-box">
      <div class="money-item">
        <div class="money-txt">￥{{ money.allMoney }}元</div>
        <div class="money-conter">总收入</div>
      </div>
      <div class="money-item">
        <div class="money-txt">￥{{ money.allMoney }}元</div>
        <div class="money-conter">已结算</div>
      </div>
      <div class="money-item">
        <div class="money-txt">￥{{ money.allMoney }}元</div>
        <div class="money-conter">可结算</div>
      </div>
    </div>
    <div class="option-box">
      <div class="option-item" v-for="(item, index) in optionList" :key="index">
        <div
          class="item-box"
          :style="{ backgroundImage: 'url(' + item.backImg + ')' }"
        >
          <img :src="item.img" style="width: 36px;height: 36px;" />
          <div class="option-itembox">
            <div class="option-title">{{ item.title }}</div>
            <div class="option-info">{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="entry-box">
      <div class="entry-list">
        <img src="./img/icon_perlist3.png" />
        <span>新手帮助</span>
      </div>
      <div class="entry-list">
        <img src="./img/icon_perlist4.png" />
        <span>分享推广</span>
      </div>
      <div class="entry-list">
        <img src="./img/icon_perlist6.png" />
        <span>联系我们</span>
      </div>
      <div class="entry-list">
        <img src="./img/icon_perlist7.png" />
        <span>系统设置</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {getUserId} from "../../util/auth";
  export default {
    methods:{
      getUserId(){
        return getUserId()
      }
    },
  data() {
    return {
      userInfo: {
        img: "",
        number: "7878",
        phone: 123456789,
        jobNum: 1234,
        level: "普通会员"
      },
      money: {
        allMoney: "0.00",
        ementMoney: "0.00",
        sureMoney: "0.00"
      },
      optionList: [
        {
          backImg: require("./img/blue.png"),
          title: "我的代呗店",
          info: "个人专属 商品管理",
          img: require("./img/per_icon1.png")
        },
        {
          backImg: require("./img/yellow.png"),
          title: "我的代呗店",
          info: "个人专属 商品管理",
          img: require("./img/per_icon2.png")
        },
        {
          backImg: require("./img/blue.png"),
          title: "我的代呗店",
          info: "个人专属 商品管理",
          img: require("./img/per_icon3.png")
        },
        {
          backImg: require("./img/yellow.png"),
          title: "我的代呗店",
          info: "个人专属 商品管理",
          img: require("./img/per_icon4.png")
        }
      ]
    };
  }
};
</script>
<style scoped type="text/stylus" lang="stylus">
.page
    width 100%
    height 100%
    background #FFF
    padding-bottom 1.43rem
    .head-box
        width 100%;
        height 4.2rem;
        background-image url("./img/bg_per.png");
        background-size 100% 100%;
        .user-info
            padding 40px 20px 0 20px;
            display flex;
            justify-content start;
            align-items center;
            img
                width 65px;
                height 65px;
                border-radius 50%;
            .user-box
                margin-left 0.4rem;
                color #fff;
                font-size 14px;
    .moneyItem-box
        display flex;
        justify-content space-between;
        .money-item
            width 33%;
            border-right 1px solid #f0f0f0;
            text-align center;
            margin-top 0.3rem;
            .money-txt
                color: #434343;
                font-size: 17px;
            .money-conter
                font-size: 13px;
                color: #9a9a9a;
                line-height 0.8rem;
    .option-box
        border-top 8px #e5e5e5 solid;
        border-bottom 8px #e5e5e5 solid;
        display flex;
        justify-content space-between;
        flex-wrap wrap;
        .option-item
            width 50%;
            display flex;
            justify-content center;
            align-items center;
            .item-box
                width 90%;
                height 1.8rem;
                background-size 100% 100%;
                margin 0.2rem 0;
                display flex;
                justify-content center;
                align-items center;
                .option-itembox
                    color #fff;
                    margin-left 0.3rem;
                    .option-title
                        font-size 14px;
                    .option-info
                        font-size 12px;
    .entry-box
        padding 10px;
        .entry-list
            border-bottom 1px #e5e5e5 solid;
            display flex;
            justify-content start;
            align-items center;
            height 52px;
            line-height 52px;
            padding 0 10px 0 15px;
            img
                width 20px
                height auto;
            span
                font-size 16px;
                margin-left 0.2rem;
</style>
